$internal-message-tab: (
  load-more-height: 30px,
  footer-height: 48px,
);

@include b(internal-message-tab) {
  @include set-component-css-var('internal-message-tab', $internal-message-tab);

  width: 100%;
  height: 100%;

  @include e(item){
    min-height: 60px;
    padding: getCssVar(spacing, tight);

    &:hover{
      background-color: getCssVar(color, fill, 1);
    }
  }

  @include e(nodata){
    @include flex(row, center, center);

    height: calc(100% - getCssVar(internal-message-tab, load-more-height))
  }

  @include e(load-more){
    height: getCssVar(internal-message-tab, load-more-height);
    line-height: getCssVar(internal-message-tab, load-more-height);
    text-align: center;

    &:hover{
      color: getCssVar(color, primary, hover);
      cursor: pointer;
    }
  }
}

@include b(internal-message-tab-content) {
  height: calc(100% - getCssVar(internal-message-tab, footer-height));
  padding-bottom: getCssVar('spacing', 'base-tight');
  overflow: hidden auto;
}

@include b(internal-message-tab-footer) {
  @include flex(row, flex-start, center);

  height: getCssVar(internal-message-tab, footer-height);
  border-top: 1px solid getCssVar(color, border);

  @include e(switch){
    margin-right: getCssVar('spacing', 'tight');
  }
}